import React, { Component } from "react";
import Banner from "../../components/banner";
import { getHomeBanner } from "../../api";
import Search from "./home-search";
import Catitem from "../../components/catitem";
import HomeList from "./home-list";

import { baseUrl } from "../../api";

// 引入样式
import "./home.scss"

// 首页
export default class Home extends Component {
    state = {
        bannerData: null,
        catiData: [
            {
                url: "/searchgoods/query=秒杀",
                catiSrc: `${baseUrl}/pyg/icon_index_nav_4@2x.png`,
            },
            {
                url: "/searchgoods/query=超市",
                catiSrc: `${baseUrl}/pyg/icon_index_nav_2@2x.png`,
            },
            {
                url: "/searchgoods/query=母婴",
                catiSrc: `${baseUrl}/pyg/icon_index_nav_1@2x.png`,
            },
            {
                url: "/searchgoods/query=充值",
                catiSrc: `${baseUrl}/pyg/icon_index_nav_5@2x.png`,
            },
        ],
    };

    render() {
        let { bannerData, catiData } = this.state;
        return (
            <div className="home">
                {/* 头部搜索栏 */}
                <Search />
                {/* 轮播图 */}
                {bannerData && <Banner data={bannerData} imgHeight={176} />}
                {/* 分类 */}
                <Catitem data={catiData} />
                {/* 商品信息 */}
                <HomeList />
            </div>
        );
    }

    async componentDidMount() {
        // 获取轮播图
        let res = await getHomeBanner();
        this.setState({
            bannerData: res.data.message,
        });
    }
}
